<template>
	<view>
		<image :src="tableData.courseCover" class="courseCoverImg" @click="showImage(tableData.courseCover)" mode="">
		</image>
		<view class="courseBox">
			<view class="courseName">
				{{ tableData.courseName }}
			</view>
			<view class="sold">
				已售:0
			</view>
			<view class="priceRange">
				￥{{ tableData.priceRange }}起
			</view>
		</view>
		<view class="specificationsBox">
			<view class="title">
				规格
			</view>
			<view v-for="(item,index) in tableData.courseSpecifications" :key="index">
				<view class="">
					<view
						:class="['courseSpecificationName',index == specificationsIndex && item.inventory > 0 ?'specificationsBoole':'']"
						@click="specificationsClick(item,index)">
						<view class="termText">
							{{ item.courseSpecificationName }}(有效期{{ item.validity }}天)
						</view>
						<view class="stockText">
							库存:{{ item.inventory }}
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="notesApplicationBox">
			<view class="title">
				报名须知
			</view>
			<view class="">
				<p v-html="tableData.notesApplication"></p>
			</view>
		</view>
		<view class="signBox">
			<view class="sign" @click="signClick">
				马上报名
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryCourseDetail,
		generateGoodsOrder
	} from "@/api/challenge";

	export default {
		data() {
			return {
				tableData: {},
				specificationsIndex: 0,
				tel: '',
				openId: '',
				orderProductInfos: [],
				venueId: ''
			}
		},
		onLoad(data) {
			console.log(data);
			this.venueId = data.venueId
			queryCourseDetail(data.id).then(res => {
				console.log('课程详情', res);
				this.tableData = res
			})
			this.tel = uni.getStorageSync('userinfo').phone
			this.openId = uni.getStorageSync('openId')
		},
		methods: {
			specificationsClick(item, index) {
				console.log(item);
				this.specificationsIndex = index
				if (item.inventory < 1) {
					uni.$u.toast("库存不足,请选择其他规格!");
				} else {
					this.orderProductInfos = []
					this.orderProductInfos.push({
						goodsId: item.courseId,
						goodsSpecification: item.id,
						quantity: 1,
						venueId: this.tableData.venueId
					})
				}

			},
			signClick() {
				console.log('点击马上报名', this.orderProductInfos);
				uni.showLoading({
					title: '加载中'
				});
				if (this.orderProductInfos.length == 0) {
					if (this.tableData.courseSpecifications[0].inventory > 0) {
						this.orderProductInfos = [{
							goodsId: this.tableData.courseSpecifications[0].courseId,
							goodsSpecification: this.tableData.courseSpecifications[0].id,
							quantity: 1,
							venueId: this.tableData.venueId
						}]
						generateGoodsOrder({
							goodsType: 1,
							openId: this.openId,
							type: 5,
							venueId: this.venueId,
							tel: this.tel,
							orderProductInfos: this.orderProductInfos,
							// 聚力
							appId: "wx5b3843197d34d53b"
						}).then(res => {
							uni.hideLoading();
							console.log('获取订单', res);
							uni.navigateTo({
								url: '/subpackageOne/venueRelated/curriculumPay/curriculumPay?orderNum=' +
									res.orderNum
							})
						})
					} else {
						uni.$u.toast("该商品库存不足,请选择其他商品!");
					}
				} else {
					generateGoodsOrder({
						goodsType: 1,
						openId: this.openId,
						type: 5,
						venueId: this.venueId,
						tel: this.tel,
						orderProductInfos: this.orderProductInfos,
						// 聚力
						appId: "wx5b3843197d34d53b"
					}).then(res => {
						uni.hideLoading();
						console.log('获取订单', res);
						uni.navigateTo({
							url: '/subpackageOne/venueRelated/curriculumPay/curriculumPay?orderNum=' + res
								.orderNum
						})
					})
				}

			},
			showImage(data) {
				uni.previewImage({
					current: data,
					urls: [data]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.courseCoverImg {
		width: 100%;
		height: 350rpx;
	}

	.courseBox {
		margin: 10rpx;
		padding: 20rpx;
		box-shadow: 0pt 1px 6px -1px rgba(0, 0, 0, 0.24);

		.courseName {
			font-size: 44rpx;
		}

		.sold {
			margin: 20rpx 0;
		}

		.priceRange {
			color: red;
		}
	}

	.specificationsBox {
		margin: 10rpx;
		padding: 20rpx;
		box-shadow: 0pt 1px 6px -1px rgba(0, 0, 0, 0.24);

		.title {
			font-size: 34rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		.courseSpecificationName {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 6rpx 20rpx;
			background: #d7d7d7;
			color: #fff;
			border-radius: 10rpx;
			margin: 10rpx 0;

			.termText {
				margin-right: 40rpx;
			}

			.stockText {
				padding: 2rpx 4rpx;
				white-space: nowrap;
			}
		}

		.specificationsBoole {
			background-color: #f59a23;
		}
	}

	.notesApplicationBox {
		margin: 10rpx;
		padding: 20rpx;
		box-shadow: 0pt 1px 6px -1px rgba(0, 0, 0, 0.24);

		.title {
			font-size: 34rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}
	}

	.signBox {
		margin: 10rpx;
		padding: 20rpx;
		box-shadow: 0pt 1px 6px -1px rgba(0, 0, 0, 0.24);
		display: flex;
		justify-content: flex-end;

		.sign {
			width: 200rpx;
			text-align: center;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 10rpx;
			background: #318efe;
			color: #fff;
		}
	}
</style>